<template>
	<view class="app-order-reservation-detail" :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<view class="e-p-t-34 e-p-b-40 e-p-l-50">
			<text class="e-font-40 fw-600">{{ $selectDictLabel(reservationOrderStatusText, info?.state) }}</text>
		</view>
		<view class="e-m-b-20" v-if="info?.writeOffCode">
			<order-code :info="info"></order-code>
		</view>
		<view class="e-m-b-20">
			<address-info :info="info || {}"></address-info>
		</view>

		<view class="e-m-b-20">
			<order-goods-card
				:store="info||{}"
				:isDetail="true"
				:goodsKeys="goodsKeys"
				:storeKeys="storeKeys"
				:goodsList="[info||{}]"
				:isJump="true"
				:receivingStatus="info?.state"
				goodsLink="/pages/nearby/goods/index"
			>
				<template #button="{ goods, receivingStatus }">
					<goods-status :isDetail="true" :goods="goods" :receivingStatus="receivingStatus"></goods-status>
				</template>
			</order-goods-card>
		</view>
		<view class="e-m-b-20">
			<order-info :info="info||{}"></order-info>
		</view>
		<contact-view customClass="shadow-f3 bg-white e-p-24 e-radius-20 e-flex-xy-center" :contact="false" @tapContact="handleTapContactIcon" v-if="SHOW_KEFU">
			<text class="iconfont icon-dingdanxiangqingkefuicon e-font-36 c-primary e-p-r-22"></text>
			<text class="e-font-30">{{ $t('order.联系卖家') }}</text>
		</contact-view>

		<view class="order-button bg-white">
			<order-button :info="info" :isDetail="true" v-if="info?.state === 2"></order-button>
			<view class="ios-btm"></view>
		</view>

		<refund-popup :type="popupType" :show="show" :color="AppSkin.primary" @close="show = false" @confirm="popupConfirm"></refund-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { throttle } from '@/common/utils';
import { getAppointmentOrderDetail, postCancelOrder, postApplyOrderRefund } from '@/common/request/api';
import orderInfo from './child/order-info.vue';
import addressInfo from './child/address.vue';
import orderButton from './child/order-button.vue';
import refundPopup from '../child/refund-popup.vue';
import goodsStatus from '../child/goods-status.vue';
import orderCode from './child/order-code.vue';
import { useCurrentInstance, usePromise } from '@/common/hooks';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { useOrder } from '@/common/stores';
import { storeToRefs } from 'pinia';
import {SHOW_KEFU} from '@/env'

const ctx = useCurrentInstance();

const orderStore = useOrder();
const { reservationOrderStatusText } = storeToRefs(orderStore);

const loading = ref(false);
let orderId = '';
// 订单列表点击取消订单按钮时进入订单详情，showCancel变为true，显示取消订单弹窗后showCancel变为false
let showCancel = false;

const goodsKeys = {
	image: 'servicePhoto',
	skuName: 'serviceSpec',
	price: 'servicePrice',
	name: 'serviceName',
	qry: 'serviceCount'
};
const storeKeys = {
	name: 'storeName',
	logo: 'storeLogo'
};

const show = ref(false);
const popupType = ref(1);
// 取消订单
const cancelOrder = throttle(function () {
	popupType.value = 1;
	show.value = true;
}, 1000);

const [getData, info] = usePromise(async () => {
	const res = await getAppointmentOrderDetail({
		id: orderId
	});

	loading.value = false;

	if (showCancel && res.data.receivingStatus === 0) {
		cancelOrder();
		showCancel = false;
	}
	return res.data;
});

//popup回调
const popupConfirm = (buyerMsg: string) => {
	show.value = false;
	if (popupType.value == 1) {
		postCancelOrder({
			orderId: info.value.orderId!
		}).then(() => {
			ctx.$goRedirectTo('/pages/order/success', {
				type: 0,
				id: orderId
			});
		});
	} else {
		postApplyOrderRefund(info.value.orderId!, {
			buyerMsg
		}).then(() => {
			ctx.$goRedirectTo('/pages/order/success', {
				type: 2,
				id: orderId
			});
		});
	}
};

const handleTapContactIcon = () => {
	ctx.$goTo('/pages/public/msg/detail', {
		oId: info.value.serviceId!,
		user: info.value.storeId!,
		name: info.value.storeName!
	});
};

onLoad((opt) => {
	if (reservationOrderStatusText.value.length === 0) {
		orderStore.getReservationOrderStatusText();
	}
	orderId = opt!.id!;
	if (opt?.cancel) {
		showCancel = true;
	}
});

onShow(() => {
	getData();
});

onPullDownRefresh(() => {
	loading.value = true;
	getData().finally(() => {
		uni.stopPullDownRefresh();
	});
});
</script>
<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
@include appBem_b(order-reservation-detail) {
	padding: 0 20rpx 140rpx 20rpx;
}

.order-button {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

::v-deep {
	.goods-info2 {
		padding: 0 !important;
	}
}
</style>
